<template>
  <div class="app-container">
     <span class="borderNone">
          <p class="shenqing">基本信息</p>
          <table border="1" rules="all" class="tablestyle">
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">盘点单号</td>
              <td style="width: 415px;padding-left: 10px;">{{data.checkCode}}</td>
              <td style="width: 164px;height: 34px;text-align: center;">创建时间</td>
              <td style="width: 415px; padding-left: 10px;">{{data.createTime}}</td>
            </tr>
            <tr>
                <td style="width: 164px;height: 34px;text-align: center;">盘点范围</td>
                <td colspan="3">{{data.rangeType}}</td>
            </tr>
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">计划盘点时间</td>
              <td style="width: 415px">{{data.planStart}}~{{data.planEnd}}
                 
              </td>
              <td style="width: 164px;height: 34px;text-align: center;">盘点时间</td>
              <td style="width: 415px">{{data.checkTime}}
                 
              </td>
            </tr>
            <tr>
              <td style="width: 164px;height: 34px;text-align: center;">责任单位</td>
              <td style="width: 415px" class="leixing">{{data.chargeDeptName}}
                 
              </td>
              <td style="width: 164px;height: 34px;text-align: center;">责任人</td>
              <td style="width: 415px;" class="leixing">{{data.chargeUserName}}
              
              </td>
            </tr>
            <tr>
              <td style="width: 164px;height: 53px;text-align: center;">备注</td>
              <td  colspan="3" style="width: 415px" class="beizhu">{{data.remark}}
                
              </td>
            </tr>
          </table>
        <p class="shenqing">盘点信息</p>
        <div style="margin-left:15px">
            <el-form :model="selectForm" ref="queryForm" :inline="true">
                <el-form-item label="台账位置">
                  <el-select v-model="selectForm.repositoryId" placeholder="请选择台账位置" style="width: 100%" clearable>
                    <el-option
                      v-for="item in deviceRepositoryTreeVoList"
                      :key="item.id"
                      :label="item.repoName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="selectForm.departmentId" placeholder="请输入所属部门" style="width: 100%" clearable>
                      <el-option
                        v-for="item in sysDeptList"
                        :key="item.id"
                        :label="item.deptName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="盘点状态：">
                  <el-select v-model="selectForm.state" placeholder="请选择" clearable>
                    <el-option
                        v-for="item in deviceStatusList"
                        :key="item.value" 
                        :label="item.label" 
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
                    
                    <!-- <el-button type="info" icon="el-icon-refresh" size="mini">更新台账</el-button> -->
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="list" border  @selection-change="currentChange">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" align="center" label="序号" width="55" :index="indexMethod"/>
                <el-table-column align="center" label="编号" prop="deviceCode" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="名称" prop="deviceName" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="类别" prop="deviceTypeName" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="品牌" prop="deviceBrand" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="部门" prop="departmentName" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="负责人" prop="chargeUserName" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="台账位置" prop="repositoryName" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="盘存位置" prop="" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="盘存状态" prop="isSave" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <div class="pd-btn" style="background:#78BF34;" v-show="scope.row.isSave=='1'">已盘点</div>
                    <div class="pd-btn" style="background:#E83672;" v-show="scope.row.isSave=='0'">未盘点</div>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="说明" prop="detailDesc" :show-overflow-tooltip="true"/>
                <el-table-column align="center" label="图片" prop="devicePicture" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    <img :src="baseUrl()+scope.row.devicePicture">
                  </template>
                </el-table-column>
            </el-table>
            <pagination
                :page-sizes="[5,10,20,50]"
                :page-size="selectForm.pageSize"
                :total="total"
                :page.sync="selectForm.pageNum"
                :limit.sync="selectForm.pageSize"
                @pagination="getList"
                />
        </div>
    </span>
  </div>
</template>

<script>

  import {inventoryDes,inventoryDto,inventoryMap} from '@/api/inventory/index'
  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "",
    components:{
      Treeselect,
    },
    data() {
      return {
        selectForm:{
            pageSize: 10,
            pageNum: 1,
            departmentId:null,
            id:null,
            repositoryId:null,
            state:null,
        },
        list:[],
        loading: false,
        data:{},
        deviceStatusList:[
          {value:'1',label:'未盘点'},
          {value:'2',label:'已盘点'},
          {value:'3',label:'盘盈'},
          {value:'4',label:'位置异常'},
        ],
        sysDeptList:[],
        deviceRepositoryTreeVoList:[],
        sysDeptProps: {
          children: "children",
          label: "label"
        },
      };
    },
    created() {
      this.selectForm.id = this.$route.query.id
      this.getData()
      this.getMap()
      this.getList()
    },
    methods: {
      getData(){
        inventoryDes(this.selectForm.id).then((res)=>{
          if(res.code==200){
            this.data=res.data.deviceTakeStock
          }
        })
      },
      getMap(){
        inventoryMap().then((res)=>{
          if(res.code==200){
            this.sysDeptList = res.data.sysDeptList
            this.deviceRepositoryTreeVoList = res.data.deviceRepositoryTreeVoList
          }
        })
      },
      currentChange(){},
      indexMethod(index){
        return this.selectForm.pageSize*(this.selectForm.pageNum-1)+(index+1)
      },
      getList(){
        inventoryDto(this.selectForm).then((res)=>{
          if(res.code==200){
            this.list=res.rows
            this.total=res.total
          }
        })
      }
    }
  };
</script>
<style>
  .app-container .borderNone .el-input--medium .el-input__inner {
    border: none;
  }
  .app-container .borderNone .el-textarea__inner {
    border: none;
  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;
  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .div-rido {
    margin-top: 15px;
  }
  .floxsty {
    display: flex;
    align-items: center;
  }
  .pd-btn{
    color: white;
    width: 54px;
    height: 22px;
    display: inline-block;
  }
</style>
